<template>
  <div>
      <dl v-for="(v,i) in car" :key="i">
        <dt>
          <img :src="v.img" alt="">
        </dt>
        <dd>
          <p><b>{{v.title}}</b></p>
          <p>￥{{v.num}}</p>
          <p>
            <button @click="carrem(v)">-</button>
            <span>{{v.count}}</span>
            <button @click="caradd(v.id)">+</button>
          </p>
        </dd>
      </dl>
      <p><b>总价:</b><span>{{totelPrice}}</span></p>
  </div>
</template>

<script>
// import <组件名称> from '<组件路径>'
import {mapState} from 'vuex'
// import Store from '../../../store'
  export default {
    name: 'Car',
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        price:0
      }
    },
    //监听属性 类似于data概念
    computed: {
      ...mapState(['car']),
     totelPrice(){
       return this.car.reduce((p,b)=>{
         return p += b.num * b.count
       },0)
     }
     
    },
    //监控data中的数据变化
    watch: {
      
    },
    //方法集合
    methods: {
      caradd(id){
        this.$store.commit('GET_CARADD',id)
      },
      carrem(v){
        this.$store.commit('GET_CARREM',v.id)
        // console.log(Store.state.car)
        // this.fun(v)
      },
      

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
     
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
  dl{
    width: 100%;
    height: 120px;
    border-bottom: 1px solid #ccc;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    dt{
      width: 50%;
      height: 100px;
      margin-right: 20px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    dd{
      flex: 1;
      p{
        margin: 10px 0;
      }
      span{
        margin: 0 10px;
      }
      button{
        width: 30px;
        height: 30px;
      }
    }
  }
</style>